<!--
 * @Author: malgee
 * @Date: 2025-04-23 09:46:26
 * @LastEditors: maling
 * @LastEditTime: 2025-04-28 12:52:32
 * @FilePath: /vue3-ts-cms/src/views/main/system/user/user.vue
 * @Description: 
 * 
-->
<template>
  <div class="user">
    <page-search 
      :searchFormConfig="searchFormConfig"
    ></page-search>
    <page-content 
      :contentTableConfig="pageTableConfig" 
      pageName="user"
    >
    <template #role="scope">
      {{ scope.row.role.name }}
    </template>
    <template #department="scope">
      {{ scope.row.department.name }}
    </template>
  </page-content>
  <page-modal 
    :modalConfig="modalConfigRef"
    pageName="user"
    :defaultInfo="defaultInfo"
    :otherInfo="otherInfo"
  ></page-modal>
  </div>
</template>

<script setup lang="ts">

import { useStore } from '@/store'

import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'

import { searchFormConfig } from './config/search.config'
import { pageTableConfig } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageModal } from '@/hooks/use-page-modal'
import { usePageSearch } from '@/hooks/use-page-search'

import { computed } from 'vue'

const [pageSearchRef, handleResetClick, handleQueryClick] = usePageSearch()

// 2. 动态添加部门和角色列表
const store = useStore()
const modalConfigRef = computed(() => {
  
  return modalConfig
})

// 3. 调用 hook 获取公共变量和函数
const addCallback = () => {}
const editCallback = () => {}
const [pageModelRef, defaultInfo, handleAdd, handleEdit] = usePageModal(addCallback, editCallback)


</script>

<style scoped></style>